<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>服务service</title>
    <script src="http://cdn.static.runoob.com/libs/angular.js/1.4.6/angular.min.js"></script>
</head>
<body>
<div id="myApp01" ng-app="myApp01" ng-controller="myCtrl01">
    <b>$location</b>{{mylocation}}
</div>
<div id="myApp02" ng-app="myApp02" ng-controller="myCtrl02">
    <b>$http</b>{{myWelcome}}
</div>
<div id="myApp03" ng-app="myApp03" ng-controller="myCtrl03">
    <b>$interval:</b>{{theTime}}
</div>
<div id="myApp04" ng-app="myApp04" ng-controller="myCtrl04">
    <b>$timeout</b>{{theTime}}
</div>
<div id="myApp05" ng-app="myApp05" ng-controller="myCtrl05">
    <b>自定义：</b>{{v}}
    <ul ng-init="counts=[100,20,33]">
        <li ng-repeat="x in counts">{{x | myFormat}}</li>
    </ul>
</div>
<script>
    var app01=angular.module('myApp01',[]);
    app01.controller('myCtrl01',function ($scope,$location) {
        $scope.mylocation=$location.absUrl();
    });
    var app02=angular.module('myApp02',[]);
    app02.controller('myCtrl02',function ($scope,$http) {
        $http.get("09service.html").then(function (response) {
            $scope.myWelcome = response.data;
        });
    });
    var app03=angular.module('myApp03',[]);
    app03.controller('myCtrl03', function($scope, $interval) {
        $scope.theTime = new Date().toLocaleTimeString();
        $interval(function () {
            $scope.theTime = new Date().toLocaleTimeString();
        }, 1000);
    });
    var app04=angular.module('myApp04',[]);
    app04.controller('myCtrl04',function ($scope,$timeout) {
        $scope.theTime=new Date().toLocaleTimeString();
        $timeout(function () {
            $scope.theTime=new Date().toLocaleTimeString();
        },3000);
    });
    var app05=angular.module('myApp05',[]);
    app05.service('hexafy',function () {
        this.myFunc=function (x) {
            return x.toString(16);
        }
    });
    app05.filter('myFormat',['hexafy', function(hexafy) {
        return function(x) {
            return hexafy.myFunc(x);
        };
    }]);
    app05.controller('myCtrl05',function ($scope,hexafy) {
        $scope.v=hexafy.myFunc(11);
    })
    angular.bootstrap(document.getElementById("myApp02"), ['myApp02']);
    angular.bootstrap(document.getElementById("myApp03"), ['myApp03']);
    angular.bootstrap(document.getElementById("myApp04"), ['myApp04']);
    angular.bootstrap(document.getElementById("myApp05"), ['myApp05']);
</script>

</body>
</html>